"use client";
import style from "./page.module.scss";
import React, { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { List, Modal, Popover, Space, Typography, message } from "antd";
import { auditOthers, otherGetOwnVideo } from "@/api";
import TextArea from "antd/es/input/TextArea";
import { InfoCircleOutlined, QuestionCircleOutlined } from "@ant-design/icons";
export interface IMyAudit {
  applyId: number;
  subjectName: string;
  applicationName: string;
  applicantId: number;
  videoId: number;
  applyStatus: string;
  cause: string;
  // TODO:申请原因
  applyCause: string;
}
const MyAudit = () => {
  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState(0);
  const [data, setdata] = useState<IMyAudit[]>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [textAreaValue, setTextAreaValue] = useState("");
  const [applyId, setApplyId] = useState(0);
  const router = useRouter();
  const getData = async (pageNum: number = 1, pageSize: number = 10) => {
    setLoading(true);
    const res = await otherGetOwnVideo({
      pageNum,
      pageSize,
    });
    if (res.data.code === 200) {
      setdata(res.data.data.records);
      setTotal(res.data.total);
      setLoading(false);
    }
  };

  const handleOpenRefuse = async (e: any, applyId: number) => {
    e.stopPropagation();
    setIsModalOpen(true);
    setApplyId(applyId);
  };
  const handleAgree = async (e: any, applyId: number) => {
    e.stopPropagation();
    await auditOthers({
      applyIds: [applyId],
      passId: 1,
    });
    message.success("操作成功");
    getData();
  };
  const handleClickItem = (vedioId: number) => {
    router.push(`/VedioContentView?videoId=${vedioId}`);
  };
  const handleTextAreaChange = (e: any) => {
    setTextAreaValue(e.target.value);
  };
  //课题审核未通过对话框
  const handleOk = async () => {
    await auditOthers({
      applyIds: [applyId],
      cause: textAreaValue,
      notPassId: 2,
    });

    setTextAreaValue("");
    setIsModalOpen(false);
    getData();
  };
  const handleCancel = () => {
    setTextAreaValue("");
    setIsModalOpen(false);
  };
  useEffect(() => {
    getData();
  }, []);

  return (
    <>
      <Modal
        title="未通过原因"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确定"
        cancelText="取消"
      >
        <TextArea
          value={textAreaValue}
          maxLength={100}
          onChange={handleTextAreaChange}
          placeholder="请输入审核未通过的原因"
          style={{ height: 120, resize: "none" }}
        />
      </Modal>
      <List
        loading={loading}
        dataSource={data}
        pagination={{
          onChange: (page) => {
            getData(page);
          },
          pageSize: 10,
          total,
          hideOnSinglePage: total > 10 ? true : false,
        }}
        className={style["list"]}
        renderItem={(item) => (
          <List.Item
            className={style["listItem"]}
            onClick={() => handleClickItem(item.videoId)}
          >
            <Typography.Text mark>{item.subjectName}</Typography.Text>
            <div className={style["item"]}>
              申请人：{item.applicationName ? item.applicationName : "匿名用户"}
            </div>
            {item.applyStatus === "0" ? (
              <Space>
                <Space>
                  <span className={style["operation"]}>查看申请理由</span>
                  <Popover content={<p>{item.applyCause}</p>} title="理由">
                    <InfoCircleOutlined className={style["operation"]} />
                  </Popover>
                </Space>
                <span
                  className={style["operation"]}
                  onClick={(e) => handleAgree(e, item.applyId)}
                >
                  同意
                </span>
                <span
                  className={style["operation"]}
                  onClick={(e: any) => handleOpenRefuse(e, item.applyId)}
                >
                  拒绝
                </span>
              </Space>
            ) : item.applyStatus === "1" ? (
              <span className={style["operation"]}>已通过</span>
            ) : (
              <Space>
                <Popover content={<p>{item.cause}</p>} title="原因">
                  <QuestionCircleOutlined className={style["operation"]} />
                </Popover>
                <span className={style["operation"]}>未通过</span>
              </Space>
            )}
          </List.Item>
        )}
      />
    </>
  );
};
export default MyAudit;
